<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     {% load staticfiles %}
    <title>DevOps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="{%  static 'images/favicon.ico' %}" type="image/x-icon"/>
    <link rel="stylesheet" href="{%  static 'lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{%  static 'css/scroll-bar.css' %}">
    <link rel="stylesheet" href="{%  static 'css/sub-page.css' %}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_hsptnwurztv.css">
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote">
        欢迎管理员：<span class="x-red">{{ request.user }}</span>！当前时间: <span id="nowTime"></span> <span id="weekday"></span>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>数据统计</legend>
        <div class="layui-row layui-col-space10 layui-row-margin">
            <div class="layui-col-md2">
                <div class="layui-bg-green md2-sub1">
                    <i class="iconfont icon-dianliyonghuzongshu"></i>
                </div>
                <div class="md2-sub2">
                    <span>{{ hostinfos.assetcount }}</span>
                    <cite>主机总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-blue md2-sub1">
                    <i class="iconfont icon-wenzhang2"></i>
                </div>
                <div class="md2-sub2">
                    <span>{{ hostinfos.asset_groupcount }}</span>
                    <cite>城市数量</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-black md2-sub1">
                    <i class="iconfont icon-pinglun"></i>
                </div>
                <div class="md2-sub2">
                    <span>100</span>
                    <cite>评论总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-orange md2-sub1">
                    <i class="iconfont icon-goods"></i>
                </div>
                <div class="md2-sub2">
                    <span>100</span>
                    <cite>商品总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-red md2-sub1">
                    <i class="iconfont icon-jiaose"></i>
                </div>
                <div class="md2-sub2">
                    <span>100</span>
                    <cite>角色总数</cite>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-bg-cyan md2-sub1">
                    <i class="iconfont icon-webpage"></i>
                </div>
                <div class="md2-sub2">
                    <span>100</span>
                    <cite>页面总数</cite>
                </div>
            </div>
        </div>
    </fieldset>

    <blockquote class="layui-elem-quote">
        系统基本参数
    </blockquote>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>本机网卡名称</td>
            {% for ip in hostinfos.ips %}
                {% for k,v in ip.items %}
            <td>{{ k }} </td>
                    {% endfor %}
            {% endfor %}
        </tr>

                <tr>
            <td>本机 IP 地址</td>
            {% for ip in hostinfos.ips %}
                {% for k,v in ip.items %}
            <td>{{ v }}</td>
                    {% endfor %}
            {% endfor %}
        </tr>

        <tr>
            <td>主机名称</td>
            <td>{{ hostinfos.hostname }}</td>
        </tr>
                <tr>
            <td>开机时间</td>
            <td>{{ hostinfos.uptime }}</td>
        </tr>
        <tr>
            <td>CPU核心数</td>
            <td>{{ hostinfos.cpus }}</td>
        </tr>
        <tr>
            <td>操作系统</td>
            <td>{{ hostinfos.system }}</td>
        </tr>
        <tr>
            <td>内存详情</td>
            <td>总共：{{ hostinfos.mem.total }}M</td>
            <td>可用：{{ hostinfos.mem.free }}M</td>
            <td>使用率：{{ hostinfos.mem.useds }}%</td>
        </tr>
        <tr>
            <td>磁盘详情</td>
            <td>总共：{{ hostinfos.disk.total }}G</td>
            <td>可用：{{ hostinfos.disk.free }}G</td>
            <td>使用率：{{ hostinfos.disk.useds }}%</td>
        </tr>

        </tbody>
    </table>

    <blockquote class="layui-elem-quote">
        作者信息
    </blockquote>
    <table class="layui-table">
        <colgroup>
            <col width="300">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>开发者</td>
            <td>刘宇</td>
        </tr>
        <tr>
            <td>coding</td>
            <td>
{#                <a class="layui-btn layui-btn-xs" href="https://github.com/bobi1234/ok-admin" target="_blank">Github</a>#}
{#                &nbsp;&nbsp;目前正在不间断迭代开发中，请大家多多#}
{#                <a class="layui-btn layui-btn-danger layui-btn-xs" href="https://github.com/bobi1234/ok-admin" target="_blank">Star</a>#}
{#                ，您的鼓励就是我开发的动力，O(∩_∩)O谢谢~#}
            </td>
        </tr>
        <tr>
            <td>lucky</td>
            <td>
{#                <a class="layui-btn layui-btn-xs" href="https://gitee.com/bobi1234/ok-admin" target="_blank">Gitee</a>#}
{#                &nbsp;&nbsp;&nbsp;&nbsp;目前正在不间断迭代开发中，请大家多多#}
{#                <a class="layui-btn layui-btn-danger layui-btn-xs" href="https://gitee.com/bobi1234/ok-admin" target="_blank">Star</a>#}
{#                ，您的鼓励就是我开发的动力，O(∩_∩)O谢谢~#}
            </td>
        </tr>
        </tbody>
    </table>

    <blockquote class="layui-elem-quote">
        更新日志
    </blockquote>
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">6月15日</h3>
                <p>
                   这么快就到6月15日
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">5月13日</h3>
                <p>哎,都毕业一年了</p>

            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">5月4日</h3>
                <p>
                    迷茫中

                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </ul>
</div>
<!--js逻辑-->
<script src="{% static  'lib/layui/layui.js'%}"></script>
<script>
    /**
     * 初始化函数
     */
    setDate();

    /**
     * 获取当前时间
     */
    var nowDate1 = "";
    function setDate() {
        var date = new Date();
        var year = date.getFullYear();
        nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + "  ";
        nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
        document.getElementById("nowTime").innerHTML = nowDate1;
        setTimeout('setDate()', 1000);
    }

    /**
     * 年月日是分秒为10以下的数字则添加0字符串
     * @param time
     * @returns {number | *}
     */
    function addZero(time) {
        var i = parseInt(time);
        if (i / 10 < 1) {
            i = "0" + i;
        }
        return i;
    }

    /**
     * 初始化星期几
     * @type {string}
     */
    var weekday = "星期" + "日一二三四五六".charAt(new Date().getDay());
    document.getElementById("weekday").innerHTML = weekday;

    layui.use('util', function () {
        var util = layui.util;
        util.fixbar({});
    });
</script>
<!--天气预报插件-->
<script>
    (function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))
</script>
<script>
    tpwidget("init", {
        "flavor": "bubble",
        "location": "WX4FBXXFKE4F",
        "geolocation": "enabled",
        "position": "top-right",
        "margin": "10px 10px",
        "language": "zh-chs",
        "unit": "c",
        "theme": "chameleon",
        "uid": "U3414DB4A9",
        "hash": "91ff44d1248d72fc847c6177474e1533"
    });
    tpwidget("show");
</script>
</body>
</html>